<template>
  <div id="index">
    <dv-full-screen-container class="bg">
      <dv-loading v-if="loading">Loading...</dv-loading>
      <div v-else class="host-body">
        <div class="title">
          <span class="title-text">大数据展示系统</span>
          <div style="width: 100%;margin-top: 0.1rem"></div>
        </div>
        <div class="data-content">
          <div class="data-content-left">
            <div class="data-left-table">
              <data-v-tables/>
            </div>
            <div class="data-left-ect">
              <dataEchart/>
            </div>
          </div>
          <div class="data-content-center">
            <mapEchart/>
          </div>
          <div class="data-content-right">
            <div class="video">
              <VideoPage/>
            </div>
            <div class="img-model">

            </div>

          </div>
        </div>
      </div>
    </dv-full-screen-container>
  </div>
</template>

<script>
import {formatTime} from '../utils/index.js'
import DataVTables from "@/views/data-v-tables";
import dataEchart from "./dataEchart";
import mapEchart from "./mapEchart";
import VideoPage from "./VideoPage";

export default {
  data() {
    return {
      loading: true,
      dateDay: null,
      dateYear: null,
      dateWeek: null,
      weekday: ["周日", "周一", "周二", "周三", "周四", "周五", "周六"],
    };
  },
  components: {
    DataVTables,
    dataEchart,
    mapEchart,
    VideoPage
    // bottomLeft,
  },
  mounted() {
    this.timeFn();
    this.cancelLoading();
  },
  methods: {
    timeFn() {
      setInterval(() => {
        this.dateDay = formatTime(new Date(), 'HH: mm: ss');
        this.dateYear = formatTime(new Date(), 'yyyy-MM-dd');
        this.dateWeek = this.weekday[new Date().getDay()];
      }, 1000)
    },
    cancelLoading() {
      setTimeout(() => {
        this.loading = false;
      }, 500);
    }
  }
};
</script>

<style lang="scss">
@import '../assets/scss/index.scss';

body {
  margin: 0;
  padding: 0;
  border: 0;
}
</style>
